<template>
  <div class="typemodel" @click="routermove">
    <img v-if="imgUrl" class="typemodel-img" :src="imgUrl">
    <div v-else class="typemodel-img typemodel-img-text">{{typeName.charAt(0).toUpperCase()}}</div>
    <div class="typemodel-title">{{typeName}}</div>
  </div>
</template>

<script>
export default {
  props: {
    id: Number,
    typeName: String,
    imgUrl: String
  },
  data() {
    return {};
  },
  methods: {
    routermove() {
      this.$router.push("/type/" + this.id);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/source.scss";
@import "@/assets/screen.scss";

$card-height: 100px;
$card-body-height: 60px;

.typemodel {
  padding: ($card-height - $card-body-height)/2 2%;
  margin: 10px 1%;
  height: $card-body-height;

  background-color: #fff;
  border-radius: 5px;
  width: 100%/4- (2 * 2%)- (2 * 1%);
  transition: 0.2s;
  box-shadow: $box-shadow-type1;
  @media (max-width: $max-screen-width - 1px) {
    padding: ($card-height - $card-body-height)/2 3%;
    width: 100%- (2 * 3%)- (2 * 1%);
  }
  @media (max-width: $media-screen-width - 1px) {
    padding: ($card-height - $card-body-height)/2 4%;
    width: 100%- (2 * 4%)- (2 * 1%);
  }
  div {
    float: left;
  }
}
.typemodel:hover {
  box-shadow: $box-shadow-type2;
  transform: translateY(-3px);
}
.typemodel-img {
  width: $card-body-height;
  height: $card-body-height;
  border-radius: $card-body-height/2;
}
.typemodel-img-text {
  user-select: none;
  color: #ffffff;
  text-align: center;
  font-size: ($card-body-height/2)+ ($card-body-height/40) * 3;
  line-height: $card-body-height;
  background-color: $main-theam-color;
}
.typemodel-title {
  margin-left: 10px;
  color: $main-theam-color;
  line-height: $card-body-height;
  font-size: ($card-body-height/3);
}
</style>

